
<template>
  <div
    class="background"
    v-loading="loading"
    element-loading-text="欢迎来到"
    element-loading-spinner="el-icon-shopping-bag-1"
    element-loading-background="rgba(255, 255, 255, 0.5)"
    style="width: 100%"
  >
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <!-- 
        label="用户名" 左边文字
        prop="age" 验证规则
        v-model.number="ruleForm.age"

      -->
      <el-form-item prop="username">
        <el-input v-model="ruleForm.username" placeholder="请输入用户名" autocomplete="off" prefix-icon="el-icon-s-custom"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          type="password"
          v-model="ruleForm.password"
          autocomplete="off"
          placeholder="请输入密码"
					 prefix-icon="el-icon-lock"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
        <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
      </el-form-item>
    </el-form>
    <p>还没有账号? 
      <router-link to="/register">
        <span>点击注册</span>
      </router-link>
      </p>
  </div>
</template>


<script>
export default {
  data() {
    var validateUser = (rule, value, callback) => {
    let reg =/^(?:(?:\+|00)86)?1[3-9]\d{9}$/
      //value就是输入的值
      if (value === '') {
        callback(new Error('请输入手机号'))
      } else {
        if(reg.test(value)){
            callback()  //必须要callback 否则提交不了
        }else{
            callback(new Error('输入正确手机号'));
        }
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    return {
      ruleForm: {
        username: '',
        password: '',
      },
      rules: {
        username: [{ validator: validateUser, trigger: 'blur' }],
        password: [{ validator: validatePass, trigger: 'blur' }],
      },
      loading: false,
    }
  },
  mounted() {
    console.log(this.$router.params, 'luyou')
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          //验证成功  -- 自定义规则验证成功
          // alert('submit!');
          this.$store.dispatch('login', this.ruleForm)
					this.loading=true
         setInterval(() => {
					 this.loading=false
				 }, 2000);
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },

    // 			removeLoading(){
    // 				let loadingInstance = Loading.service(options);
    // this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
    //   loadingInstance.close();
    // });
    // 			}
  },
}
</script>

<style scoped>
.demo-ruleForm {
  /* z-index:1; */
  margin-top: 15vh;
}
.el-input {
  margin-left: -12.5vw;
  border-radius: 30px;
  width: 73vw;
}
.background {
  width: 100%;
  height: 100%; /**宽高100%是为了图片铺满屏幕 */
  /* z-index:-1; */
  /* position: absolute; */
  background: url(../../assets/bg.jpg);
}
.el-button {
  width: 73vw;
  margin-left: -12.5vw;
}
.el-loading-spinner .el-loading-text {
  font-size: 18px;
}
p{
  margin-left: 50vw;
}
p span{
  font-size: 14px;
  color: rgb(0, 60, 255);
}
</style>